<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        watch 能干什么
            1. 监听数据的变化，然后去干些事情
     -->

    <div id="app">
        <p>{{ person.name }}</p>
        <p>{{ person.age }}</p>
        <p>{{ person.addressInfo.sheng }}</p>

        <button @click="person.addressInfo.sheng = '湖南'">修改省份为湖南</button>

        <!-- 
            需求：当省份发生变化时，console.log 一下
         -->
    </div>

    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                person: {
                    name: '张三',
                    age: 18,
                    addressInfo: {
                        sheng: '广东省',
                        shi: '深圳市',
                    }
                }
            },
            watch: {
                // person(newVal, oldVal) {
                //     console.log('11111')
                // }

                // person: {
                //     handler(newVal, oldVal) {
                //         console.log('11111')
                //     },
                //     deep: true, // 启用深度监听
                //     immediate: true, // 启用默认执行一次
                // }
                
                // person: {
                //     handler(newVal, oldVal) {
                //         console.log('11111')
                //     },
                //     deep: true, // 启用深度监听
                // },

                // 只有age发生变化，才触发
                'person.age'() {
                    console.log('111112222')
                },

                // 'person.addressInfo.sheng'() {

                // }
            }
        })
    </script>
</body>
</html>